<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            li{
                color:red;
            }
            P{
                color:red;
            }
            a[title$=flower]{
                color:red;
            }
            </style>
            </head>
            <body>
                <a href="https://www.baidu.com/" target="_blank">百度一下</a>
                <form target="_self">
                    输入<input type="text"/>
                    </form>
                </body>
            <body>
                <h1>高级CSS选择器练习题</h1>
        <!-- 组合选择器部分 -->
        <article>
            <h2 class="special">组合选择器练习区</h2>
            <p>这是一个普通段落</p>
            <p class="highlight">这是需要高亮的段落</p>
            
            <ul id="list1">
                <li>列表项1
                    <ul>
                        <li>嵌套列表项1</li>
                        <li>嵌套列表项2</li>
                    </ul>
                </li>
                <li>列表项2</li>
            </ul>
        </article>
    
        <!-- 属性选择器部分 -->
        <section>
            <h2>属性选择器练习区</h2>
            <form>
                <input type="text" required>
                <input type="password">
                <input disabled >
                <input type="checkbox" checked>
                <a href="#target1" target="_blank">新窗口链接</a>
                <a href="#target2">当前窗口链接</a>
            </form>
        </section>
    
        <!-- 伪类选择器部分 -->
        <section>
            <h2 lang="en">Pseudo-class Practice</h2>
            <table>
                <thead>
                    <tr><th>标题1</th><th>标题2</th></tr>
                </thead>
                <tbody>
                    <tr><td>数据1-1</td><td>数据1-2</td></tr>
                    <tr><td>数据2-1</td><td>数据2-2</td></tr>
                    <tr><td>数据3-1</td><td>数据3-2</td></tr>
                </tbody>
            </table>
            
            <ol>
                <li>第一个列表项</li>
                <li>第二个列表项</li>
                <li>第三个列表项</li>
            </ol>
        </section>
    
        <!-- 伪元素和兄弟选择器部分 -->
        <aside>
            <h3>相邻兄弟选择器示例</h3>
            <p>第一个段落</p>
            <p>第二个段落</p>
            
            <h3>另一个标题</h3>
            <p>需要特殊样式的段落</p>
            <p>普通段落</p>
            
            <p class="quote">这是一个重要的引用文本</p>
        </aside>
    </body>
                
                <ul>
                    <li class="country">富强</li>
                    <li class="country">民主</li>
                    <li class="country">文明</li>
                    <li class="country">和谐</li>
                    </ul>
                <ul>
                    <p class="social">自由</p>
                    <p class="social">平等</p>
                    <p class="social">公正</p>
                    <p class="social">法治</p>
                    </ul>
                <ul>
                    <li class="human">爱国</li>
                    <p class="human">敬业</p>
                    <p class="human">诚信</p>
                    <li class="human">友善</li>

